<template>
  <div class="w-full h-full flex-column">
    <backstage-title title="包月优惠规则" icon-class="month-active" class="f-bold-title mb-20" />
    <Filtering
      :filters="filters"
      :btn-list="btnList"
      @onFilter="handleFilter"
      @reset="reset"
    />
    <Table
      :page-data="pageData"
      :selection-data="selectionData"
      :table-data="tableData"
      @selection-change="handleSelectionChange"
      @pagination="getList"
    >
      <template #startTime="slotInfoProps">
        <div>
          {{ slotInfoProps.info.row.startTime }} 至 {{ slotInfoProps.info.row.endTime }}
        </div>
      </template>
      <template #isEnable="slotInfoProps">
        <el-switch
          v-model="slotInfoProps.info.row.isEnable"
          active-color="#3491FA"
          inactive-color="#AEB9C9"
          :active-value="1"
          :inactive-value="0"
          @change="handleStatus(slotInfoProps.info.row)"
        >
        </el-switch>
      </template>
      <template #ruleList="slotInfoProps">
        <div v-if="+slotInfoProps.info.row.ruleType === 1">
          <div v-for="(item,index) in slotInfoProps.info.row.ruleList.data" :key="index">
            <div>同时包月{{ item.amount }}个{{ index > 0 ? '及以上': '' }}车场,享受每月{{ item.rate }}折优惠</div>
          </div>
        </div>
        <div v-if="+slotInfoProps.info.row.ruleType === 2">
          <div v-for="(item,index) in slotInfoProps.info.row.ruleList.data" :key="index">
            <div>同时包月{{ slotInfoProps.info.row.ruleList.amount }}个{{ index > 0 ? '及以上': '' }}车场,享受满{{ item.total }}元,减{{ item.reduce }}元</div>
          </div>
        </div>
        <div v-if="+slotInfoProps.info.row.ruleType === 3">
          <div v-for="(item,index) in slotInfoProps.info.row.ruleList.data" :key="index">
            <div>同时包月{{ item.amount }}个{{ index > 0 ? '及以上': '' }}车场,减{{ item.reduce }}元/月</div>
          </div>
        </div>
      </template>
      <template #action="slotInfoProps">
        <el-button
          type="text"
          size="medium"
          @click="handleDetail(slotInfoProps.info.row)"
        >查看</el-button>
        <el-button
          type="text"
          size="medium"
          @click="handleEdit(slotInfoProps.info.row)"
        >编辑</el-button>
        <!-- <Confirm
          @onConfirm="handleConfirm(slotInfoProps.info.row)"
        /> -->
      </template>
    </Table>

    <dialog-tpl class="form-dialog" :dialog-config="dialogConfig">
      <template #dialogContent>
        <component
          :is="dialogConfig.componentTag"
          :dialog-config="dialogConfig"
          @showParkTransfer="showParkTransfer"
          @reload="getList"
        ></component>
      </template>
    </dialog-tpl>
    <park-transfer ref="parkTransfer" />
  </div>
</template>

<script>
import AddEdit from './components/add-edit'
import Simulator from './components/simulator'
import Detail from './components/detail'
import ParkTransfer from './components/park-transfer'
import Discounts from '@/services/discounts.js'
import { RULE_TYPE } from '@/plugins/options'
import Parking from '@/services/parking-list.js'
export default {
  components: {
    AddEdit,
    Simulator,
    Detail,
    ParkTransfer
  },
  data () {
    const { ruleFormatter } = this.$formatters
    return {
      filters: [
        {
          type: 'input',
          value: '',
          label: '套餐名称',
          style: 'width: 220px;margin-right: 30px',
          placeholder: '请输入套餐名称关键词'
        },
        {
          type: 'select',
          value: '',
          label: '优惠方式',
          placeholder: '请选择优惠方式',
          options: RULE_TYPE
        },
      ],
      btnList: [
        // {
        //   text: '新增',
        //   type: 'primary',
        //   icon: 'el-icon-circle-plus-outline',
        //   click: () => {
        //     this.dialogConfig = {
        //       show: true,
        //       type: 'add',
        //       title: '包月优惠规则新增',
        //       width: '42%',
        //       data: {},
        //       componentTag: 'AddEdit'
        //     }
        //   }
        // },
        {
          text: '模拟器',
          icon: 'el-icon-help',
          plain: true,
          click: () => {
            this.dialogConfig = {
              show: true,
              title: '模拟器',
              width: '35%',
              data: {},
              componentTag: 'Simulator'
            }
          }
        },
      ],
      pageData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      tableData: {
        columns: [
          { label: '套餐名称', prop: 'ruleName' },
          { label: '优惠方式', prop: 'ruleType', formatter: ruleFormatter },
          { label: '优惠规则', prop: 'ruleList', slot: true, width: 350 },
          { label: '绑定车场', prop: 'parkingNames', wordsWrap: true },
          { label: '套餐时间', prop: 'startTime', slot: true, wordsWrap: true },
          { label: '启用状态', prop: 'isEnable', slot: true, width: 100 },
          { label: '操作', prop: 'action', slot: true, width: 120 },
        ],
        data: [
        ],
        config: {
          selection: true,
          index: false
        },
        pageConfig: {
          choose: true
        }

      },
      selectionData: [],
      dialogConfig: {
        show: false,
        title: '包月优惠规则新增',
        width: '35%',
        data: {},
        componentTag: 'AddEdit'
      }
    }
  },
  computed: {
    searchParams () {
      const [ruleName,
        ruleType,] = this.filters.map(i => i.value)
      return {
        ruleName, ruleType
      }
    }
  },
  provide: {
    parkConfig: {
      parkList: [
      ],
      parkData: [],
      parkName: []
    }
  },
  created () {
    this.getList()
    this.getParking()
  },
  methods: {
    getParking () {
      Parking.ParkingList({pageNum: 1, pageSize: 9999, isOperate: 1}).then(res => {
        this.parkConfig.parkList = (res.rows || []).map(i => ({ label: i.parkName, key: i.id, disabled: false, ...i}))
      })
    },
    handleFilter () {
      this.pageData.page = 1
      this.getList()
    },
    handleStatus (row = {}) {
      const confirmText = +row.isEnable === 0 ? '确定要禁用该规则？' : '确定要启用该规则吗？'
      this.$confirm(confirmText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Discounts.DiscountsEdit({...row, idEnable: +row.isEnable === 0 ? 1 : 0}).then(res => {
          this.$message.success('操作成功')
          this.getList()
        })
      }).catch(() => {
        row.isEnable = +row.isEnable === 0 ? 1 : 0
      })
    },
    getList () {
      const { page: pageNum, pageSize} = this.pageData
      Discounts.DiscountsList({ ...this.searchParams, pageNum,pageSize}).then(res => {
        const { rows: tableData, total } = res
        this.tableData = {
          ...this.tableData,
          data: tableData.map(i => ({...i, ruleList: JSON.parse(i.ruleContent)}))
        }
        this.pageData = {
          ...this.pageData,
          total
        }
      })
    },
    handleSelectionChange (val) {
      this.selectionData = val
    },
    handleDetail (row = {}) {
      this.dialogConfig = {
        show: true,
        title: '包月优惠规则查看',
        width: '42%',
        data: {...row},
        componentTag: 'Detail'
      }
    },
    handleEdit (row = {}) {
      this.dialogConfig = {
        show: true,
        type: 'edit',
        title: '包月优惠规则编辑',
        width: '42%',
        data: {...row},
        componentTag: 'AddEdit'
      }
    },
    handleConfirm (row = {}) {
      Discounts.DiscountsDel(row.id).then(res => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    showParkTransfer () {
      this.$refs.parkTransfer.dialogConfig.show = true
    },
    reset () {
      this.filters = this.filters.map(i => ({...i,value: ''}))
      this.getList()
    }
  }
}
</script>

